<template>
  <div style="width: 100%;"  v-loading="loading">
    <div style="height: 50px;">
      <el-autocomplete
        v-model="keyword"
        :fetch-suggestions="querySearchAsync"
        value-key="value"
        placeholder="请输入搜索内容"
        style="width: 500px; vertical-align: middle"
      >
        <template v-slot="{item}">
          <div class="autocomplete-choose-name" v-html="htmlValue(item.value)"></div>
        </template>
      </el-autocomplete>
      <el-button
        slot="append"
        class="search-icon"
        icon="el-icon-search"
        type="primary"
        round
        @click="toSearchHtml"
      ></el-button>
    </div>
    <el-tabs tab-position="left" style="height: 100%; margin-top:40px" v-if="!loading && categoryList.length !== 0">
      <el-tab-pane v-for="(cat, i) in categoryList" :key="i" :label="cat.typeName" class="f-style">
        <el-link :underline="false" v-for="(smCat, j) in cat.smallCategoryList" :key="j"
                 style="font-size: 25px;margin-left: 20px" @click="toSearchHtmlByType(smCat.stypeName)">
          {{ smCat.stypeName }}
        </el-link>
      </el-tab-pane>
    </el-tabs>
    <el-empty description="加载商品类别失败" v-else></el-empty>
  </div>
</template>

<script>
import {goodsCategoryList, getSearchSuggestion, keywordSearch} from "@/api";
import {debounce} from '@/utils/tools'

export default {
  name: "cate-header-vue",
  data() {
    return {
      categoryList: [],
      restaurants: [],
      keyword: "",
      timeout: null,
      loading: true,
    };
  },
  methods: {
    // 获取商品品类列表
    async getGoodsCategory() {
      await goodsCategoryList().then(res => {
        this.categoryList = res.data.result;
        this.loading = false
      }).catch(error => {
        this.loading = false
      })
    },
    // 跳转到搜索结果页面
    toSearchHtml() {
      let version = '1'
      window.open(
        "http://localhost:8080/search.html?keyword=" + this.keyword  + "&version=" + version,
        "_blank"
      );
    },
    toSearchHtmlByType(val){
      let version = '2'
      window.open(
        "http://localhost:8080/search.html?keyword=" + val + "&version=" + version,
        "_blank"
      );
    },
    // 返回输入建议
    querySearchAsync: debounce(async function (queryString, cb) {
      // 获取搜索联想数据
      await getSearchSuggestion({keyword: queryString}).then(res => {
        const result = []
        for (let suggest of res.data.result) {
          result.push({value: suggest})
        }
        cb(result)
      })
    }, 500),
    // 搜索联想高亮候选词
    htmlValue(val) {
      let key = this.keyword;
      if (key.length > 0) {
        return val.replace(
          new RegExp(key, "g"),
          "<span style='color:red;'>" + key + "</span>"
        );
      }
      return val;
    },
  },
  mounted() {
    this.getGoodsCategory();

  },
};
</script>

<style scoped>
.f-style {
  font-size: 25px;
  line-height: 50px;
  padding: 10px 10px;
  text-align: left;
}

.search-icon {
  font-size: 20px;
  font-weight: bold;
  width: 100px;
  height: 45px;
  margin-left: 10px;
  vertical-align: middle;
}

</style>
